<template>
	<!-- 20230425 -->
	<view class="text-rate-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="flex align-center justify-center">
				<!-- 每颗星星 -->
				<view class="star-item" v-for="(item,index) in count" :key="index" @click="click(index)">
					<!-- 选中状态 -->
					<text class="" :class="icon" :style="{'font-size' : size + 'rpx', 'color' : finishedColor}"
						v-if="index <= values - 1"></text>

					<!-- 半星状态 -->
					<view class="position-relative text-ed" :class="icon" :style="{'font-size': size + 'rpx'}"
						v-if="index > values - 1 && index < values">
						<text class="text-icon-text" :class="[icon, 'width_' + values_dec * 100]"
							:style="{'font-size' : size + 'rpx', 'color' : finishedColor}"></text>
					</view>

					<!-- 未选中状态 -->
					<text style="color: #F3F3F3;" :class="icons" :style="{'font-size': size + 'rpx'}"
						v-if="index >= values"></text>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		props: {
			// 唯一标识
			index: {
				type: [Number, String],
				default: 0
			},
			// 当前分值
			value: {
				type: [Number, String],
				default: 5
			},
			// 图标总数
			count: {
				type: [Number],
				default: 5
			},
			// 图标大小，默认单位rpx
			size: {
				type: Number,
				default: 48
			},
			// 图标颜色
			color: {
				type: String,
				default: '#000'
			},
			// 是否为只读状态
			readonly: {
				type: Boolean,
				default: false
			},
			// 选中时的图标名称
			icon: {
				type: String,
				default: 'iconfont icon-Star'
			},
			icons: {
				type: String,
				default: 'iconfont icon-Star'
			}
		},
		data() {
			return {
				style: {},
				values: this.value,
				values_int: Math.floor(this.value),
				values_dec: (this.value % 1).toFixed(1)
			}
		},
		computed: {
			// 最终颜色
			finishedColor() {
				return this.color ? this.color : common.mainColor()
			}
		},
		watch: {
			value: function() {
				this.values = this.value;
				this.values_int = Math.floor(this.value);
				this.values_dec = (this.value % 1).toFixed(1)
			}
		},
		methods: {
			click(index) {
				if (!this.readonly) {
					this.values = index + 1
				}
				this.$emit('change', {
					index: this.index,
					star: this.values
				});
			}
		},
	}
</script>

<style scoped>
	/* 每颗星星 */
	.star-item {
		display: flex;
		/* justify-content: center; */
		/* align-items: center; */
		margin-left: 20rpx;
	}
	
	.star-item:nth-child(1) {
		margin-left: 0rpx;
	}

	.text-icon-text:before {
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		overflow: hidden;
	}

	.width_10:before {
		width: 10%;
	}

	.width_20:before {
		width: 20%;
	}

	.width_30:before {
		width: 30%;
	}

	.width_40:before {
		width: 40%;
	}

	.width_50:before {
		width: 50%;
	}

	.width_60:before {
		width: 60%;
	}

	.width_70:before {
		width: 70%;
	}

	.width_80:before {
		width: 80%;
	}

	.width_90:before {
		width: 90%;
	}
</style>